<template>
	<view class="invoice-form">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<view class="form">
			<view class="form-item">
				<text class="label">抬头类型</text>
				<view class="form-input">
					<u-radio-group v-model="formData.header_type" @change="changeHeaderType">
						<u-radio v-for="(item, index) in header_type_list" :key="index" :name="item.value"
							:label="item.name">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
			</view>

			<view class="form-item">
				<text class="label">发票类型</text>
				<view class="form-input">
					<u-radio-group v-model="formData.type" @change="changeInvoiceType" :disabled="disabled">
						<u-radio v-for="(item, index) in invoice_type_list" :key="index" :name="item.value"
							:label="item.name">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
			</view>

			<view v-if="formData.header_type===1">
				<view class="form-item">
					<text class="label">姓名</text>
					<view class="form-input">
						<input v-model="formData.name" placeholder="请填写您的姓名" />
					</view>
				</view>

				<view class="form-item">
					<text class="label">身份证号码</text>
					<view class="form-input">
						<input v-model="formData.duty_number" placeholder="请填写您的身份证号码" />
					</view>
				</view>
			</view>
			<view v-if="formData.header_type===2">
				<view class="form-item">
					<text class="label">发票抬头</text>
					<view class="form-input">
						<input v-model="formData.name" placeholder="请填写您的发票抬头" />
					</view>
				</view>

				<view class="form-item">
					<text class="label">税号</text>
					<view class="form-input">
						<input v-model="formData.duty_number" placeholder="请填写您的税号" />
					</view>
				</view>
			</view>

			<view v-if="formData.type===2">
				<view class="form-item">
					<text class="label">注册电话</text>
					<view class="form-input">
						<input v-model="formData.tell" placeholder="请填写您的注册电话" />
					</view>
				</view>

				<view class="form-item">
					<text class="label">注册地址</text>
					<view class="form-input">
						<input v-model="formData.address" placeholder="请填写您的注册地址" />
					</view>
				</view>

				<view class="form-item">
					<text class="label">注册开户银行</text>
					<view class="form-input">
						<input v-model="formData.bank" placeholder="请填写您的注册开户银行" />
					</view>
				</view>

				<view class="form-item">
					<text class="label">银行卡号</text>
					<view class="form-input">
						<input v-model="formData.card_number" type="number" placeholder="请填写您的银行卡号" />
					</view>
				</view>
			</view>

			<view class="form-item">
				<text class="label">联系电话</text>
				<view class="form-input">
					<input v-model="formData.drawer_phone" type="number" placeholder="请填写您的开票人手机号" />
				</view>
			</view>

			<view class="form-item">
				<text class="label">开票人邮箱</text>
				<view class="form-input">
					<input v-model="formData.email" placeholder="请填写您的开票人邮箱" />
				</view>
			</view>

			<u-cell style="padding-left: 0; padding-right: 0;" title="设置默认发票"
				:title-style="{fontSize: '28rpx', fontWeight: 'bold'}" label="每次开票会默认推荐该开票信息"
				:label-style="{fontSize: '24rpx', margin: 0, fontWeight: 'normal'}">
				<template #value>
					<u-switch v-model="formData.is_default" @change="changeDefault()"></u-switch>
				</template>
			</u-cell>

			<view class="btn" @click="submit">立即提交</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '发票管理',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		formData: {
			id: 0,
			header_type: 2, //抬头类型1:个人2：企业
			type: 1, //发票类型1：普通2：专用
			name: '',
			duty_number: '',
			drawer_phone: '',
			email: '',
			tell: '',
			address: '',
			bank: '',
			card_number: "",
			is_default: false,
		},

		disabled: false,

		header_type_list: [{
			name: '个人',
			value: 1,
		}, {
			name: '企业',
			value: 2,
		}],
		invoice_type_list: [{
			name: '普票',
			value: 1,
		}, {
			name: '专票',
			value: 2,
		}],
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
		}
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	const changeHeaderType = (e) => {
		console.log('抬头类型', e);
		if (e == 1) {
			state.formData.type = 1;
			state.disabled = true;
		} else {
			state.disabled = false;
		}
	}

	const changeInvoiceType = (e) => {
		console.log('发票类型', e);
	}

	const changeDefault = () => {
		console.log('默认发票', state.formData.is_default);
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		id,
		status,
		detail,
		formData,
		disabled,
		header_type_list,
	} = toRefs(state);
</script>

<style lang="scss">
	page {
		background-color: $u-bg-reverse-color;
	}

	.invoice-form {
		.form {
			padding: $m20;

			.form-item {
				@include f-between;
				padding: $m32 0;
				border-bottom: 1px solid $u-border-color;

				.label {
					width: 180rpx;
					font-weight: bold;
					color: $u-main-color;
				}

				.form-input {
					@include f-between;
					flex: 1;

					textarea {
						flex: 1;
						width: 100%;
						height: 120rpx;
						padding: $m12;
						background-color: $u-bg-color;
						border-radius: $radius-12;
					}

					input {
						flex: 1;
						color: $u-content-color;
					}
				}

				.tags {
					flex: 1;
					display: flex;
					flex-wrap: wrap;
					align-items: center;

					text {
						margin: $m12;
						padding: 0.2em 1.2em;
						font-size: $font-24;
						border-radius: $radius-100;
						border: 1px solid $u-border-color;

						&.checked {
							background-color: #2979ff;
							color: $u-reverse-color;
							border-color: #2979ff;
						}
					}
				}
			}

			.btn {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 40rpx;
				background: linear-gradient(to right, #125cd7, #279dfa);
				color: #fff;
				text-align: center;
			}
		}
	}
</style>